<template>
  <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
    <el-form-item class="advanced-search-item pb10">
      <el-col :xs="8" :sm="6" :md="4" :lg="2">
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-refresh"
          class="advanced-search"
          @click="resetAdvancedSearch"
        >重 置</el-button>
      </el-col>
    </el-form-item>
    <el-form-item class="advanced-search-item pb10" label="中心：">
      <el-radio-group v-model="center" size="mini" @change="handleGetDept">
        <el-radio-button type="success" label @click.native="resetDept">不限</el-radio-button>
        <el-radio-button
          type="success"
          v-for="(item,index) in centerList"
          :key="index"
          :label="item"
        >{{item}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="advanced-search-item pb10" label="部门：">
      <el-radio-group v-model="dept" size="mini" @change="handleGetSalesman">
        <el-radio-button type="success" label @click.native="resetSalesman">不限</el-radio-button>
        <el-radio-button
          v-for="(item,index) in deptList"
          :key="index"
          :label="item"
        >{{`${center}${item}`}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="advanced-search-item pb10" label="业务员：">
      <el-radio-group v-model="salesman" size="mini" @change="handleEmit">
        <el-radio-button type="success" label>不限</el-radio-button>
        <el-radio-button v-for="(item,index) in salesmanList" :key="index" :label="item">{{item}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="advanced-search-item pb10"
      label="订单状态："
      v-if="advancedSearchs.includes('sign')"
    >
      <el-radio-group v-model="isSign" size="mini" @change="handleEmit">
        <el-radio-button label>不限</el-radio-button>
        <el-radio-button label="已签订">已签订</el-radio-button>
        <el-radio-button label="未签订">未签订</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="advanced-search-item pb10"
      label="审过状态："
      v-if="advancedSearchs.includes('pass')"
    >
      <el-radio-group v-model="isPass" size="mini" @change="handleEmit">
        <el-radio-button label>不限</el-radio-button>
        <el-radio-button label="已审过">已审过</el-radio-button>
        <el-radio-button label="未审过">未审过</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="advanced-search-item pb10"
      label="权证专员："
      v-if="advancedSearchs.includes('pass')"
    >
      <el-radio-group v-model="warrantMan" size="mini" @change="handleEmit">
        <el-radio-button label>不限</el-radio-button>
        <el-radio-button v-for="(item,i) in warrantManList" :key="i" :label="item.id">{{item.name}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="advanced-search-item pb10"
      label="提车状态："
      v-if="advancedSearchs.includes('pick')"
    >
      <el-radio-group v-model="isPick" size="mini" @change="handleEmit">
        <el-radio-button label>不限</el-radio-button>
        <el-radio-button label="已提车">已提车</el-radio-button>
        <el-radio-button label="未提车">未提车</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="advanced-search-item pb10"
      label="定金转业绩："
      v-if="advancedSearchs.includes('deposit_to_achievement')"
    >
      <el-switch v-model="depositToAchievement" @change="handleEmit"></el-switch>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "advanced_search",
  data() {
    return {
      center: "",
      dept: "",
      salesman: "",
      isSign: "",
      isPick: "",
      isPass: "",
      depositToAchievement: false,
      warrantMan: "",
      centerList: [],
      deptList: [],
      salesmanList: [],
      warrantManList: [],
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      }
    };
  },
  computed: {
    search() {
      return `${this.center}${this.dept}${this.salesman}`;
    },
    filter() {
      return {
        search: this.search,
        sign: this.isSign,
        warrantMan: this.warrantMan,
        pass: this.isPass,
        pick: this.isPick,
        depositToAchievement: this.depositToAchievement ? 1 : 0
      };
    }
  },
  mounted() {
    this.getCenters();
    this.getWarrantMans();
  },
  props: ["advancedSearchs"],
  methods: {
    getWarrantMans() {
      this.$axios.get("/api/system/warrantMans").then(data => {
        this.warrantManList = data;
      });
    },
    getCenters() {
      this.$axios.get("/api/system/centers").then(data => {
        this.centerList = data.map(item => {
          return item.name;
        });
      });
    },
    resetAdvancedSearch() {
      this.center = "";
      this.dept = "";
      this.salesman = "";
      this.deptList = [];
      this.salesmanList = [];
      this.isSign = "";
      this.isPick = "";
      this.isPass = "";
      this.warrantMan = "";
      this.depositToAchievement = false;
      this.$emit("filter", this.filter);
    },
    resetDept() {
      this.deptList = [];
      this.salesmanList = [];
    },
    resetSalesman() {
      this.salesmanList = [];
    },
    handleGetDept(e) {
      this.salesmanList = [];
      this.dept = "";
      this.salesman = "";
      this.center && this.getDepts(e);
      this.$emit("filter", this.filter);
    },
    handleGetSalesman(e) {
      this.salesman = "";
      this.dept && this.getSalesmans(e);
      this.$emit("filter", this.filter);
    },
    handleEmit() {
      this.$emit("filter", this.filter);
    },
    getDepts(center) {
      this.$axios.post("/api/system/departmentList", { center }).then(data => {
        this.deptList = data.map(item => {
          return item.name;
        });
      });
    },
    getSalesmans(dept) {
      this.$axios
        .post("/api/system/salesmanList", { center: this.center, dept })
        .then(data => {
          this.salesmanList = data.map(item => {
            return item.name;
          });
        });
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.advanced-search-item {
  border-bottom: 1px solid #eaeefb;
}
.advanced-search {
  margin-left: -58px;
}
</style>
